<template>
    <div class="material-page">
      <el-dialog title="选择物料" :visible.sync="materialTableVisible" :before-close="materialTableDialogClose" :width="dialogWidth" :close-on-click-modal="false" custom-class="material-table-dialog">
        <el-table :data="tableData" v-loading="tableLoading" highlight-current-row @current-change="selectCurrentChange" style="width: 100%;" height="450px">
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column prop="material_code" label="物料编码" width="" align="center">
            <template slot-scope="scope" slot="header">
              <table-head-filter label="物料编码" type="input" :bindData="formData.material_code" filterField="material_code" @change="filterChangeEvent"></table-head-filter>
            </template>
          </el-table-column>
          <el-table-column prop="materialName" label="物料名称" width="" align="center"></el-table-column>
          <!-- <el-table-column prop="typeName" label="物料类型" width="100" align="center"></el-table-column>
          <el-table-column prop="standard" label="物料规格" width="150" align="center"></el-table-column>
          <el-table-column prop="unitOne" label="物料单位" width="100" align="center"></el-table-column>
          <el-table-column prop="sortName" label="物料分类" width="100" align="center"></el-table-column>
          <el-table-column prop="stateName" label="状态" width="100" align="center"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150" align="center"></el-table-column> -->
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,30,50,100]" :page-size="pageSize" background layout="prev, pager, next,total, sizes" :total="total" style="margin-top:5px;"></el-pagination>
        <span slot="footer" class="dialog-footer">
            <el-button @click="materialTableDialogClose" size="mini">取消</el-button>
            <el-button type="primary" @click="materialTableDialogConfirm" size="mini">确定</el-button>
        </span>
      </el-dialog>
    </div>
</template>
  
<script>
import { computed } from "vue";
import TableHeadFilter from "@/components/tableHeadFilter/index.vue";
import T from "@/utils/tools.js";
import { reqMaterialList } from "@/api/workOrder.js";
export default {
    name:"materialTableDialog",
    components:{
      TableHeadFilter
    },
    props:{
      materialTableVisible:{
        type:Boolean,
        default:false,
        require:false
      }
    },
    data() {
      return {
        formData:{
          material_code:"",
        },
        tableData:[],
        currentRow:null,
        tableLoading:false,
        pageSize:10,
        total:0,
        currentPage:1,
        dialogWidth:'60%'
      }
    },
    mounted(){
      window.addEventListener("resize",this.calculateDialogWidth);
    },
    watch:{
      materialTableVisible:function(val){
        if(val) this.getMaterialTableList();
      }
    },
    beforeDestroy(){
      window.removeEventListener("resize",this.calculateDialogWidth);
    },
    methods:{
      getMaterialTableList(){
        const parameter = { page:this.currentPage, size:this.pageSize,...this.formData };
        this.tableLoading = true;
        reqMaterialList(parameter).then(response => {
            const list = response.data.data.content;
            const total = response.data.data.totalElements;
            this.tableData = list;
            this.total = total;
            this.tableLoading = false;
        },error => {
            this.tableLoading = false;
            console.log("获取物料列表信息api",error);
        })
      },
      selectCurrentChange(val){
        this.currentRow = val;
      },
      handleCurrentChange(curPage){
        this.currentPage = curPage;
        this.getMaterialTableList();
      },
      handleSizeChange(pageSize){
        this.pageSize = pageSize;
        this.getMaterialTableList();
      },
      materialTableDialogClose(){
        const parameter = { type:"close",materialInfo:null };
        this.$emit('change',parameter);
      },
      materialTableDialogConfirm(){
        const parameter = { type:"confirm",materialInfo:this.currentRow };
        this.$emit('change',parameter);
      },
      //tableHeadFiler的change事件
      filterChangeEvent(parameter){
        const { state, filterField, selectedValue } = parameter;
        if(state === 'clear'){
          //清空操作
          if(this.formData[filterField] !== ""){
            this.formData[filterField] = "";
            this.getMaterialTableList();
          }
        }
        if(state === 'confirm'){
          //确定操作
          this.formData[filterField] = selectedValue;
          if(selectedValue !== ""){
            this.getMaterialTableList();
          }
        }
      },
      calculateDialogWidth(){
        const page = document.querySelector(".material-page");
        const width = page.offsetWidth;
        if(width < 600){
          this.dialogWidth = "95%";
        } else {
          this.dialogWidth = "60%";
        }
      }
    }
}
</script>
  
<style lang='scss' scoped>
.material-page{
  width: 100%;
}
</style>